<template>
    <div>
        <el-table :data="entityList" style="width: 100%" v-loading="loading" :row-class-name="tableRowClassName"
            max-height="900" border>
            <el-table-column v-for="(value, key, index) in entityListStructure" :prop="key" :label="value" :key="index"
                :fixed="key == pkName ? true : false" :width="key == pkName ? 'auto' : 200" />
            <el-table-column label="操作" width="170">
                <template slot="header" slot-scope="scope">
                    <span>{{ entityName }}操作</span>
                    <span><el-button type="info" @click="showAddDialog">添加{{ entityName }}</el-button></span>
                </template>
                <template slot-scope="scope">
                    <el-button size="mini" @click="showEditDialog(scope.row[pkName])">
                        <i class="el-icon-edit"></i>编辑</el-button>
                    <el-button size="mini" type="danger" @click="showDeleteAlert(scope.row[pkName])">
                        <i class="el-icon-delete"></i>删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 实体操作类对话框 -->
        <el-dialog :title="opName + entityName" :visible.sync="isOperationDialogShowed" width="30%" align="center"
            :before-close="function (done) { this.$confirm('确认关闭？').then(_ => { done(); }).catch(_ => { }) }">
            <el-table-column v-for="(value, key, index) in entityListStructure" :key="index">
                <div v-if="key != pkName">
                    <div>
                        <td><span>{{ value }}</span></td>
                    </div>
                    <div v-if="value.includes('时间')">
                        <el-date-picker v-model="nowEntity[key]" type="datetime" placeholder="选择日期时间"
                            default-time="12:00:00" value-format="yyyy-MM-dd HH:mm:ss">
                        </el-date-picker>
                    </div>
                    <div v-else>
                        <td><el-input v-model="nowEntity[key]" :placeholder="'请输入' + value" /></td>
                    </div>
                </div>
            </el-table-column>
            <span slot="footer" class="dialog-footer">
                <el-button @click="isOperationDialogShowed = false">取 消</el-button>
                <el-button type="primary" @click="opAction">提 交</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: 'Test',
    data() {
        return {
            entityList: [],// 数据操作相关
            nowEntity: {},
            entityListStructure: {},
            isOperationDialogShowed: false, // 视图展示相关
            loading: true,
            entityName: "供应商", // 视图构建相关
            pkName: "supplierId",
            opName: "操作名称",
            opAction: function () { },
        }
    },
    mounted: function () { this.getEntityList() },
    beforeCreate: function () {
        this.$axios.get("http://localhost:8080/orSupplier/getMapping").then(res => {
            for (const column of res.data) {
                // 驼峰转换
                this.entityListStructure[column.columnName.replace(/\_(\w)/g, function (all, letter) { return letter.toUpperCase() })] = column.columnComment
            }
        }).catch(err => { console.log(err) });
    },
    methods: {
        tableRowClassName({ rowIndex }) { return rowIndex % 2 ? 'warning-row' : 'success-row' },
        getEntityList: function () {
            this.loading = true;
            this.$axios.get("http://localhost:8080/orSupplier/listAllOrSupplier")
                .then(res => { this.entityList = res.data }).then(() => { this.loading = false }).catch(err => { console.log(err) });
        },
        showDeleteAlert: function (pk) {
            this.$confirm('确认删除？').then(() => {
                this.$axios.delete("http://localhost:8080/orSupplier/deleteOrSupplierById?supplierId=" + pk)
                    .then(res => { this.showOperationResult(res) }).catch(err => { console.log(err) })
            }).catch(_ => { });
        },
        showAddDialog: function () {
            this.nowEntity = {};
            this.prepareOperation("添加", this.addEntity)
        },
        showEditDialog: function (pk) {
            this.$axios.get("http://localhost:8080/orSupplier/findOrSupplierById?supplierId=" + pk)
                .then(res => { this.nowEntity = res.data }).then(this.prepareOperation("修改", this.updateEntity)).catch(err => { console.log(err) });
        },
        addEntity: function () {
            this.$axios.post("http://localhost:8080/orSupplier/addOrSupplier", this.nowEntity)
                .then(res => { this.showOperationResult(res) }).catch(err => { console.log(err) }).then(this.clearNowOperation)
        },
        updateEntity: function () {
            this.$axios.put("http://localhost:8080/orSupplier/updateOrSupplier", this.nowEntity)
                .then(res => { this.showOperationResult(res) }).catch(err => { console.log(err) }).then(this.clearNowOperation)
        },
        prepareOperation: function (opN, act) {
            this.opName = opN;
            this.isOperationDialogShowed = true;
            this.opAction = act
        },
        clearNowOperation: function () {
            this.isOperationDialogShowed = false;
            this.opAction = function () { };
            this.nowEntity = {}
        },
        showOperationResult: function (res) {
            this.$alert(res.data, '操作结果', { confirmButtonText: '确定' });
            this.getEntityList();
        }
    }
}
</script>